<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生命周期钩子</title>
</head>
<body>
  
</body>
<script>
export default {
  name: '',
  data() {
    return {}
  },
  components: {},
  methods: {},
  computed: {},
  beforeCreate() {
    console.log('beforeCreate 创建vue实例完成之前所执行的')
  },
  created() {
    console.log('created 实例创建完成之后的,初始化data和methods')
  },
  beforeMount() {
    console.log('beforeMount 开始编译把data里面的数据和vue语法生成html模板')
  },
  mounted() {
    console.log('mounted 开始挂载编译生成的html渲染到页面')
  },
  beforeUpdate() {
    console.log('beforeUpdate 当data里面数据改变时触发')
  },
  updated() {
    console.log('updated data里面的数据和页面保持同步')
  },
  beforeDestroy() {
    console.log('beforeDestroy vue实例从运行状态进入销毁状态,data、methods、指令等还处于可用状态')
  },
  destroyed() {
    console.log('destroyed 组件完全被销毁,data、methods、指令等已经不可用了')
  }
}
</script>
</html>